<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #box {
      line-height: 60px;
    }
  </style>
</head>

<body>
  <div id="box">
    你好
  </div>
  <script>
    // 修改元素样式
    var box = document.getElementById("box");
    // 设置单个样式
    box.style.color = "red";
    //设置多个样式
    box.style.cssText = "width:300px;height:300px;background:blue;color:red;position:absolute;"

    // var x = 100;
    // setInterval(function () {
    //   box.style.top = ++x + "px";
    // }, 10)

    //获取样式
    // getComputedStyle(对象，伪类).样式名
    // 非ie所支持的获取非行间样式的方法
    // 用法：getComputedStyle(对象，伪类).样式名
    // 放null参数的那个地方放false也可以
    // 例：getComputedStyle(oDiv, null).color
    var fontSize = getComputedStyle(box, null).fontSize;
    console.log(fontSize)
    var lineHeight = getComputedStyle(box, null).lineHeight;
    console.log(lineHeight)

    // currentStyle
    // ie所支持的获取非行间样式的方法
    // 用法：对象.currentStyle.样式名
    // 例：oDiv.currentStyle.width
    // var fontSizes = box.currentStyle.fontSize;
    // console.log(fontSizes)
    //1.兼容写法
    function getStyle(obj, name) {
      if (obj.currentStyle) {
        return obj.currentStyle[name];
      } else {
        return getComputedStyle(obj, false)[name];//
        //return getComputedStyle(obj,null)[name];放null参数的那个地方放false也可以
      }
    }
    var lineHeigth = getStyle(box, "line-height")
    console.log(lineHeigth)

  </script>
</body>

</html>